<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <div class="wrap">
                <input type="button" value="点击" id="btn">
                <div class="inner">
                     我是弹窗
                    <span>span</span>
                </div>
        </div>
    
</body>
<script>
 
 function isParent (obj,parentObj){
        while (obj != undefined && obj != null && obj.tagName.toUpperCase() != 'BODY'){
            if (obj == parentObj){
                return true;
            }
            obj = obj.parentNode;                                                                                                                      
        }
        return false;
}
 
function stropCancel(e){
    var ev = e||window.event;
    if(ev&&ev.stopPropagation){
        // 阻止事件冒泡
     ev.stopPropagation()
    }else{
    //    设置事件是否可被取消
     ev.cancelable = true
    }
}
let btn = document.getElementById('btn');
let inner = document.getElementsByClassName('inner')[0]
let wrap = document.getElementsByClassName('wrap')[0]
// 点击触发按钮,弹窗出现
btn.addEventListener('click',function(e){
   stropCancel(e)
   inner.style.display = 'block';
},false);
 
// mouseup事件在鼠标抬起时触发
// 点击的不是弹窗对象而且弹窗对象不是点击的对象的父亲的时候 隐藏
document.addEventListener('mouseup',function(e){
    // inner弹窗对象
    var objTarget = inner;  
    if( objTarget != e.target && !isParent(e.target,objTarget) ){                                 
     inner.style.display = 'none';
    }
},false);
</script>
</html>
